<!-- yangbuyi Copyright (c) https://yby6.com 2023. -->

<template>
  <view class="u-calendar-header u-border-bottom">
    <text class="u-calendar-header__title" v-if="showTitle">{{ title }}</text>
    <text class="u-calendar-header__subtitle" v-if="showSubtitle">{{
      subtitle
    }}</text>
    <view class="u-calendar-header__weekdays">
      <text class="u-calendar-header__weekdays__weekday">一</text>
      <text class="u-calendar-header__weekdays__weekday">二</text>
      <text class="u-calendar-header__weekdays__weekday">三</text>
      <text class="u-calendar-header__weekdays__weekday">四</text>
      <text class="u-calendar-header__weekdays__weekday">五</text>
      <text class="u-calendar-header__weekdays__weekday">六</text>
      <text class="u-calendar-header__weekdays__weekday">日</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "u-calendar-header",
  mixins: [uni.$u.mpMixin, uni.$u.mixin],
  props: {
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 副标题
    subtitle: {
      type: String,
      default: "",
    },
    // 是否显示标题
    showTitle: {
      type: Boolean,
      default: true,
    },
    // 是否显示副标题
    showSubtitle: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
  methods: {
    name() {},
  },
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.u-calendar-header {
  padding-bottom: 4px;

  &__title {
    font-size: 16px;
    color: $u-main-color;
    text-align: center;
    height: 42px;
    line-height: 42px;
    font-weight: bold;
  }

  &__subtitle {
    font-size: 14px;
    color: $u-main-color;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
  }

  &__weekdays {
    @include flex;
    justify-content: space-between;

    &__weekday {
      font-size: 13px;
      color: $u-main-color;
      line-height: 30px;
      flex: 1;
      text-align: center;
    }
  }
}
</style>
